import React from 'react';
import { Link } from 'react-router-dom';
import { Row, Col, message } from 'antd';
import PropTypes from 'prop-types';
import { inject, observer } from 'mobx-react';
import Helmet from 'react-helmet'

import NewsList from '../store/new_list'
// import AppState from '../store/app_state'
import PCHeader from './pc_header';
import PCFooter from './pc_footer';
import PCNewsModule from './pc_newsmodule';
import PCNewsImgModule from './pc_news_imgmodule';

import Pagination from './pagination/index';

import { changeTitle } from '../util/comm';

@inject((stores) => {
  const store = {
    appState: stores.appState,
    newsList: stores.newsList,
  }
  return store
})
@observer
class PCNewsList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      pageNum: this.props.match.params.pageNum || 1,
      pageSize: 64,
    }
    this.onChangePage = this.onChangePage.bind(this);
  }
  // 完成dom加载
  componentDidMount() {
    // this.getNews(this.props.count, 1);
    changeTitle(this.props.match.params.newsName);
    this.getNews(this.state.pageNum)
  }
  // 完成dom更新
  componentDidUpdate(prevProps) {
    // 判断两次的url是否一致
    const newType = this.props.match.params.newsName;
    const oldType = prevProps.match.params.newsName;
    if (oldType !== newType) {
      this.getNews(this.props.count);
    }
  }
  // 点击分页
  onChangePage(pageNum) {
    this.getNews(this.props.count, pageNum);
    this.setState({
      pageNum,
    })
  }
  getNewsDataFromBobx() {
    const channel = decodeURIComponent(this.props.match.params.newsName) //eslint-disable-line
    const newsType = `${channel}${this.state.pageNum}`
    const { newsPageData } = this.props.newsList
    const news = newsPageData.get(newsType) ? newsPageData.get(newsType).data : [] // eslint-disable-line
    const total = newsPageData.get(newsType) ? newsPageData.get(newsType).total : 0
    return {
      channel,
      news,
      total,
    }
  }
  // 请求新闻数据
  getNews(pageNum) {
    // 请求新闻的参数类别channel,页码page,每页数量num
    const channel = this.props.match.params.newsName;
    const num = this.state.pageSize;
    const page = pageNum
    this.props.newsList
      .getPageNews(decodeURIComponent(channel), num, page)
      .catch(e => message.error(`出错了，请稍后再试${e}`))
  }
  // 服务端异步执行
  asyncBootstrap() {
    return new Promise((resolve, reject) => {
      const channel = decodeURIComponent(this.props.match.params.newsName)
      this.props.newsList
        .getPageNews(channel, this.state.pageSize, this.state.pageNum)
        .then(() => resolve(true)).catch(reject)
    })
  }
  render() {
    const { news, channel, total } = this.getNewsDataFromBobx()
    const siderBar1 = channel !== '头条' ?
      { channel: '头条', title: '今日头条' } : { channel: '新闻', title: '今日新闻' };
    const siderBar2 = channel !== '娱乐' ?
      { channel: '娱乐', title: '大众娱乐' } : { channel: '财经', title: '财经频道' };
    const siderBar3 = channel !== '体育' ?
      { channel: '体育', title: '体育世界' } : { channel: 'NBA', title: 'NBA最前线' };
    return (
      <div id="pc" className="pc-list">
        <PCHeader newsName={channel} />
        <Helmet>
          <title>{channel}</title>
        </Helmet>
        <Row>
          { news.length ?
            <Col span={18}>
              <ul className="pc-news-list">
                { news.map(newsItem => (
                  <li key={newsItem.id} className="pc-newslist-item">
                    <div className="pc-news-img">
                      <Link to={`/detail/${newsItem.id}`}>
                        <img src={newsItem.pic} alt={newsItem.title} />
                      </Link>
                    </div>
                    <div className="pc-news-info">
                      <h3 className="pc-news-title">
                        <Link to={`/detail/${newsItem.id}`}>{newsItem.title}</Link>
                      </h3>
                      <span className="pc-news-type">
                        {newsItem.src}
                      </span>
                      <span className="pc-news-time">
                        {newsItem.time}
                      </span>
                    </div>
                  </li>))
                }
              </ul>
              { total > this.state.pageSize ?
                <Pagination
                  onChange={this.onChangePage}
                  current={-(0 - this.state.pageNum)}
                  total={-(0 - total)}
                  pageSize={this.state.pageSize}
                  showLessItems
                  location={`/list/${this.props.match.params.newsName}/`}
                />
                :
                ''
              }
            </Col>
            :
            <Col span={18}>
              <div className="loading">加载中...</div>
            </Col>
          }
          <Col span={1} />
          <Col span={5}>
            <PCNewsModule type={siderBar1.channel} count="25" title={siderBar1.title} />
            <PCNewsImgModule type={siderBar2.channel} count="10" rowCount="2" title={siderBar2.title} />
            <PCNewsImgModule type={siderBar3.channel} count="10" rowCount="2" title={siderBar3.title} />
          </Col>
        </Row>
        <PCFooter />
      </div>
    )
  }
}
export default PCNewsList;

PCNewsList.propTypes = {
  match: PropTypes.objectOf(Object),
  count: PropTypes.string,
  newsList: PropTypes.instanceOf(NewsList),
  // appState: PropTypes.instanceOf(AppState),
}
